<template>
    <div class="content">
        <el-row class="title_block enterprise_info hpx-title-border">
            <span class="title_text">企业信息</span>
            <span class="col"><span class="hpx-label">企业名称：</span>{{model.drawer_name}}</span>
            <span class="col" v-if="model.bill_style_id != 303"><span class="hpx-label">历史交易成功率：</span>{{tradeCount}}</span>
            <span class="col" v-if="model.bill_style_id != 303"><span class="hpx-label">平均背书时长：</span>{{endorsement.minute}}分{{endorsement.second}}秒</span>
            <span class="top_btn" v-if="model.drawer_id > 0">
                <el-button type="primary" size="small" @click="$router.push(`../../stockBill/${model.drawer_id}`)">查看该企业全部库存票</el-button>
            </span>
        </el-row>
        <el-row class="detail_mian">
            <el-col :span="12" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">票据信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="票据号:">{{model.bill_number}}</el-form-item>
                    <el-form-item label="承兑人全称:">{{model.acceptor_name}}</el-form-item>
                    <el-form-item label="承兑机构:">{{model.acceptor_type_name}}</el-form-item>
                    <el-form-item label="票面金额:" class="hpx-red-tips"><span class="remind">{{model.bill_sum_price | numFormat}}元</span></el-form-item>
                    <el-form-item label="到期时间:">{{model.bill_deadline_time | formatDate}}(<span v-if="model.remaining_day != null">剩余{{model.remaining_day}}天</span><span v-if="model.remaining_day == null">已过期</span>)</el-form-item>
                    <el-form-item label="汇票瑕疵:" class="hpx-red-tips">{{formatArr}}</el-form-item>
                    <el-form-item label="背书次数:">{{model.endorsement_number}}</el-form-item>
                    <el-row class="imgs">
                        <el-col :span="5" :offset="1" v-if="model.bill_front_photo_id">
                            <!-- <img :src="model.bill_front_photo_path" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="formatPath(model.bill_front_photo_path)"
                            ></ImageZoom>
                            <el-row class="tag">票据正面</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id1">
                            <!-- <img :src="model.bill_back_photo_path1" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="formatPath(model.bill_back_photo_path1)"
                            ></ImageZoom>
                            <el-row class="tag">背书面1</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id2">
                            <!-- <img :src="model.bill_back_photo_path2" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="formatPath(model.bill_back_photo_path2)"
                            ></ImageZoom>
                            <el-row class="tag">背书面2</el-row>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">订单信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="订单号码:">{{model.order_number}}</el-form-item>
                    <el-form-item label="贴现利率:" class="hpx-red-tips">{{model.order_rate}}{{model.bill_type_id == 101 ? '%' : '‰'}}</el-form-item>
                    <el-form-item label="每十万加:" class="hpx-red-tips">{{model.order_every_plus ? model.order_every_plus : '--'}}{{model.order_every_plus ? '元' : ''}}</el-form-item>
                    <el-form-item label="竞价方式:">{{model.bill_bidding_model_name}}</el-form-item>
                    <el-form-item label="发布期限:">T+{{model.trade_appoint_day}}</el-form-item>
                    <el-form-item label="平台服务费:" class="hpx-red-tips">{{model.commission}}个汇票豆</el-form-item>
                    <el-form-item label="贴现金额:" class="hpx-red-tips remind"><span class="remind">{{model.order_total_price | numFormat}}元</span></el-form-item>
                    <el-form-item label="生成时间:">{{model.order_time | formatDay}}</el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">订单状态</span>
                </el-row>
                <div class="order_status" v-if="model.order_status_id == 804">
                    <el-row class="text_center">卖方已确认交易</el-row>
                    <el-row class="text_center remind hpx-red-tips">请支付票款至兴业数金代管专户</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                    <el-row class="text_center">
                        <el-button type="info" @click="cancel()" class="hpx-cancel-color dialog-button">取消交易</el-button>
                        <el-button type="primary" @click="payment()" class="dialog-button">付款</el-button>
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 805">
                    <el-row class="text_center">正在充值付款，请等待...</el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 806">
                    <el-row class="text_center remind">已付款</el-row>
                    <el-row class="text_center">待卖方背书</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 807">
                    <el-row class="text_center">卖方已背书</el-row>
                    <el-row class="text_center remind hpx-red-tips">请完成签收</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                    <el-row class="text_center">
                        <el-button type="primary" @click="signFor()" class="dialog-button">确认签收</el-button>
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 808">
                    <el-row class="text_center remind">已签收</el-row>
                    <el-row class="text_center">待系统核验解冻</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id >= 810 && model.order_status_id <= 813">
                    <el-row class="text_center"><i class="iconfont icon-wancheng hpx-success"></i></el-row>
                    <el-row class="text_center">恭喜您交易完成</el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 810">
                        <el-button type="primary" plain size="small" @click="evaluate(model,null)">评价</el-button>
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 811 || model.order_status_id == 812">
                        <el-button type="primary" plain size="small" @click="evaluate(model,1)">查看评价</el-button>
                        <el-button type="primary" plain size="small" @click="evaluate(model,0)" v-if="model.order_status_id == 811">评价</el-button>
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 813">
                        <el-button type="primary" plain size="small" @click="evaluate(model,null)">查看评价</el-button>
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id > 813">
                    <el-row class="text_center" v-if="model.order_status_id == 814">
                        申请退款中
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 815">
                        退款结束
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 816">
                        交易中止
                    </el-row>
                </div>
                <el-row class="text_center hpx-red-tips" v-if="model.bill_is_valid == -1">
                    该票据已下架
                </el-row>
            </el-col>
        </el-row>
        <!-- 付款弹框 -->
        <DialogInput ref="remin" title="买方确认付款操作">
            <div class="rem-dialog-con text_left">
                <FormTitle title="付款信息"/>
                <el-form label-width="120px" size="mini">
                    <el-form-item label="订单编号:">{{model.order_number}}</el-form-item>
                    <el-form-item label="平台服务费:" class="hpx-red-tips">{{model.commission}}个汇票豆</el-form-item>
                    <el-form-item label="贴现金额:" class="hpx-red-tips">{{model.order_total_price}}元</el-form-item>
                    <el-form-item label="付款户:">{{model.receiver_enterprise_name}}</el-form-item>
                    <el-form-item label="执剑人账户号:">{{model.receiver_account_number}}</el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter">
                <el-row class="sign_con_btn">
                    <el-checkbox v-model="checkedContract">我已阅读并同意<el-button type="text" @click="openBillContract()">《票据应收款转让服务合同》</el-button></el-checkbox>
                </el-row>
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">再考虑一下</el-button>
                <el-button @click="confirmPayment()" :disabled="!checkedContract" type="primary" class="dialog-button">付款</el-button>
            </span>
        </DialogInput>
        <BillContract ref="bill-contaract-dailog"/>
        <!-- 付款成功弹框 -->
        <DialogInput ref="payment-success" title="付款">
            <div class="rem-dialog-con reserva-dialog">
                <el-row class="hpx-success">
                    <i class="iconfont icon-chenggong"></i>
                </el-row>
                <el-row>
                    付款成功！
                </el-row>
            </div>
            <span slot="Remfooter">
                <el-button type="primary" size="small" class="dialog-button" @click="closeDialog()">确定</el-button>
            </span>
        </DialogInput>
        <!-- 取消交易弹框 -->
        <DialogInput ref="cancel" title="取消交易操作">
            <div class="rem-dialog-con text_left cancel_trade">
                <el-row class="row_text hpx-label short_row">
                    <i class="iconfont icon-tixing hpx-red-tips"></i><span class="hpx-font-weight">提醒:</span> 取消交易将影响您的平台交易成功率与评价，请谨慎使用!
                </el-row>
                <el-row class="row_text hpx-label">请选择取消交易的原因</el-row>
                <el-checkbox-group v-model="defaultCnacelReason" class="cancelReason">
                    <el-row class="cancel_reason">
                        <el-col :span="8" v-for="item in cancelReason" :key="item.key">
                            <el-checkbox :label="item.key">
                                {{item.label}}
                            </el-checkbox>
                        </el-col>
                    </el-row>
                </el-checkbox-group>
                <el-row class="row_text short_row">其他原因</el-row>
                <el-input class="cancelReason" type="textarea" v-model="otherCancelReason" placeholder="如有其它原因，请说明。"></el-input>
            </div>
            <span slot="Remfooter">
                <el-button @click="confirmCancel()" type="info" class="hpx-cancel-color dialog-button">取消交易</el-button>
                <el-button @click="closeDialog()" type="primary" class="dialog-button">再考虑一下</el-button>
            </span>
        </DialogInput>
        <!-- 确认签收弹框 -->
        <DialogInput ref="confirm" title="买方确认签收操作">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row class="warning">是否确认签收</el-row>
                <el-row>请在网银中签收后，再到平台上确认签收!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmSignFor()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 评价弹框 -->
        <DialogEvaluate ref="evaluate" @submitEvaluate="submitEvaluate" :channel="'buyer'"/>
    </div>
</template>
 
<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'
    import DialogInput from '@component/common/DialogInput.vue'
    import FormTitle from '@component/common/FormTitle.vue'
    import BillContract from '@component/common/BillContract.vue'
    import DialogEvaluate from '@component/common/DialogEvaluate.vue'
    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
    import ImageZoom from '@component/common/ImageZoom.vue'
    import { getEndorsementFileName1 } from '@/util/format'
    @Component({
        components:{
            Table,
            DialogInput,
            FormTitle,
            BillContract,
            DialogEvaluate,
            ImageZoom
        },
        computed: {
            ...mapState([
                'userInfo'
            ]),
            ...mapState('myBill', ['billContractCona'])
        },
        methods: {
            ...mapMutations('myBill', [
                'setBillContractCona'
            ]),
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class OrderDetail extends Vue {

        @Prop(String) id!:string
        //data
        timer:any = null
        //订单状态
        // 1: 卖方已确认交易，2: 已支付-待卖方背书  3: 已背书-待签收  4: 已签收-待核验解冻  5: 交易完成-待评价 6:对方已完成评价 7: 均已完成评价 8: 交易关闭
        orderStatus = 1
        //是否签订合同
        checkedContract = true
        //订单详情数据
        model:any = {}
        endorsement:any = {
            minute: 0,
            second: 0
        }
        tradeInfo:any = {
            finish_order_num: 0,
            real_deal_order_num: 0
        }
        //取消交易的原因
        defaultCnacelReason = []
        otherCancelReason = ''
        cancelReason = [{
                key: 2401,
                label: '资金不足'
            },{
                key: 2402,
                label: '价格变动'
            },{
                key: 2403,
                label: '额度已满'
            },{
                key: 2404,
                label: '无法入金'
            },{
                key: 2405,
                label: '确认交易时间过长'
            },{
                key: 2406,
                label: '拍错订单'
        }]
        //等待时间
        waiteTimeForm: any = {
            difference: '',
            waitTimeD: '',
            waitTimeH: '',
            waitdateM: '',
            waitdateS: '',
            waitdate: ''
        }

        @Watch('id')
        onIdChanged(val: string, oldVal: string) {
            this.getDetailData()
        }
        
    //methods
        //查看该企业库存票
        // toStockBill () {
        //     window.location.href = 'stockBill.html?id='+this.model.drawer_id
        // }
        formatPath (path) {
            return getEndorsementFileName1(path)
        }
        //获取订单详情
        async getDetailData () {
            let res = await this.$http.get(`orders/order/${this.id}`)
            if(res.status == 200  && res.data){
                this.model = res.data
                this.getendorsementTime()
                this.getTradeCount()
                let data = res.data;
                let billContractCona = {
                    drawer_name: data.drawer_name,
                    bill_number: data.bill_number,
                    acceptor_name: data.acceptor_name,
                    bill_sum_price: data.bill_sum_price,
                    bill_deadline_time: data.bill_deadline_time,
                    receiver_name: data.receiver_name,
                    receiver_legalname: '',
                    drawer_account_number: data.drawer_account_number,
                    drawer_account_person: data.drawer_account_person,
                    drawer_bank_name: data.drawer_account_bank,
                    drawer_bank_number: data.drawer_account_bank_number,
                    receiver_account_number: data.receiver_account_number,
                    receiver_account_person: data.receiver_account_person,
                    receiver_bank_name: data.receiver_account_bank,
                    receiver_bank_number: data.receiver_account_bank_number,
                    deal_price: data.real_deal_price,
                    total_deal_price: data.order_total_price,
                    server_price: '',
                    systemTime: ''
                }
                this.setBillContractCona(billContractCona);
            }
        }
        // 根据企业id查询法人代表
        async getLegalInfo (enterprise_id: string|number, check: string|number) {
            let res = await this.$http.get(`enterpriseXingyeUser/getLegalInfo?enterpriseId=${enterprise_id}`)
            if(res.status == 200){
                if(check == 1){
                    // 卖方法人
                    this.billContractCona.drawer_legalname = res.data.legalName;
                }else if(check == 2){
                    // 买方法人
                    this.billContractCona.receiver_legalname = res.data.legalName;
                }
            }
        }
        async getComission () {
            let res = await this.$http.get(`tools/calculator/comission?acceptorTypeId=${this.model.acceptor_type_id}&sumPrice=${this.model.bill_sum_price}`)
            if(res.status == 200){
                this.billContractCona.server_price = res.data;
            }
        }
        async getSystemTime () {
            let res = await this.$http.get('tools/systemTime')
            if(res.status == 200){
                this.billContractCona.systemTime = res.data;
                let newSystemDate = new Date().getTime();
                this.waiteTimeForm.difference = newSystemDate - res.data;
            }
        }
        // 弹出票据转让服务协议
        openBillContract () {
            this.$refs['bill-contaract-dailog'].openDialog();
        }
        //查询企业平均背书时长
        async getendorsementTime () {
            let params = {
                enterpriseId: this.model.drawer_id
            }
            let res = await this.$http.get('customers/customer/endorsementTime',{params})
            if(res.status == 200 && res.data){
                this.endorsement = res.data
            }
        }
        //查询企业交易成功率
        async getTradeCount () {
            let res = await this.$http.get(`customers/enterpriseOrderCount/${this.model.drawer_id}`)
            if(res.status == 200){
                this.tradeInfo = res.data
            }
        }
        //计算企业交易成功率
        get tradeCount () {
            if (this.tradeInfo.real_deal_order_num == 0) {
                return '首单'
            }else{
                return parseInt(this.tradeInfo.finish_order_num/this.tradeInfo.real_deal_order_num*100)+'%'
            }
        }
        get formatArr () {
            return this.model.bill_flaw_names ? this.model.bill_flaw_names.join('，') : ''
        }
        //付款弹框
        payment () {
            this.$refs['remin'].openDialog();
            this.getComission();
            this.getSystemTime();
            this.getLegalInfo(this.model.drawer_id,1)
            this.getLegalInfo(this.model.receiver_id, 2);
        }
        //确认付款
        async confirmPayment () {
            let res:any = await this.$http.post(`/paying/xingyeapi/orderPay/${this.model.id}`)
            if(res.status == 200){
                this.$refs['remin'].closeDialog();
                this.$refs['payment-success'].openDialog()
                this.getDetailData()
                this.getAllTips()
            }
        }
        //取消交易弹框
        cancel () {
            this.$refs['cancel'].openDialog();
        }
        //确认取消交易
        async confirmCancel () {
            let params = {
                orderId: this.model.id,
                becauseId: this.defaultCnacelReason.join(','),
                description: this.otherCancelReason
            }
            let res = await this.$http.put('orders/orderStop/overOrder',params)
            if(res.status == 200){
                this.$refs['cancel'].closeDialog();
                this.getAllTips()
                this.$alert('买方取消交易成功！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {
                        this.$router.push('/buyer/order')
                    }
                })
            }
        }
        //签收弹框
        signFor () {
            this.$refs['confirm'].openDialog();
        }
        //确认签收
        async confirmSignFor () {
            // let params = {
            //     orderId: this.model.id
            // }
            let res = await this.$http.put(`paying/xingyeapi/pay/${this.model.id}`)
            if(res.status == 200){
                this.getDetailData()
                this.getAllTips()
                this.$refs['confirm'].closeDialog();
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
            }
        }
        async getWaitTime () {
            let newdate = new Date().getTime();
            if (this.waiteTimeForm.difference >= 0) {
                if(this.model.order_status_id == 804){
                    this.waiteTimeForm.waitdate = newdate - this.model.order_time - this.waiteTimeForm.difference;
                }else {
                    this.waiteTimeForm.waitdate = newdate - this.model.order_update_time - this.waiteTimeForm.difference;
                }
            } else {
                if(this.model.order_status_id == 804){
                    this.waiteTimeForm.waitdate = newdate - this.model.order_time + this.waiteTimeForm.difference;
                }else {
                    this.waiteTimeForm.waitdate = newdate - this.model.order_update_time + this.waiteTimeForm.difference;
                }
            }
            if(this.waiteTimeForm.waitdate > 1000){
                let waitTime = new Date(this.waiteTimeForm.waitdate);
                this.waiteTimeForm.waitTimeD = waitTime.getDate();
                if (this.waiteTimeForm.waitTimeD > 2) {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8 + (this.waiteTimeForm.waitTimeD - 1) * 24;
                } else if (this.waiteTimeForm.waitTimeD > 1) {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8 + 24;
                } else {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8;
                }
                this.waiteTimeForm.waitdateM = waitTime.getMinutes();
                this.waiteTimeForm.waitdateS = waitTime.getSeconds();
            }else {
                this.waiteTimeForm.waitTimeH = 0;
                this.waiteTimeForm.waitdateM = 0;
                this.waiteTimeForm.waitdateS = 0;
            }
        }
        get waiteH () {
            return this.waiteTimeForm.waitTimeH == '' ? '' : this.waiteTimeForm.waitTimeH
        }
        get waiteHText () {
            return this.waiteTimeForm.waitTimeH == '' ? '' : '小时'
        }
        //评价弹框
        evaluate (model:any,status:any) {
            if(model.order_status_id == 810){
                this.$refs['evaluate'].addEvaluateDialog();
            }else if(model.order_status_id == 811 || model.order_status_id == 812){
                if(status == 1)
                    this.$refs['evaluate'].lookEvaluateDialog(model)
                if(status == 0)
                    this.$refs['evaluate'].addEvaluateDialog();
            }else{
                this.$refs['evaluate'].lookEvaluateDialog(model)
            }
        }

        //提交评价
        async submitEvaluate (info) {
            let params = {
                ...info,
                orderId: this.model.id,
                receiverId: this.model.receiver_id
            }
            let res = await this.$http.post('order/appraisal/receiver',params)
            if(res.status == 200){
                this.getDetailData()
                this.$refs['evaluate'].closeDialog();
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
            }
        }
        closeDialog () {
            this.$refs['remin'].closeDialog();
            this.$refs['payment-success'].closeDialog()
            this.$refs['cancel'].closeDialog();
            this.$refs['confirm'].closeDialog(); 
        }
        mounted() {
            this.getDetailData()
            this.getSystemTime();
            this.timer = setInterval(()=>{
                this.getWaitTime();
            },1000)
        }
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>
 
<style lang="scss" scoped>
    
    .enterprise_info{
        height: 50px;
        line-height: 50px;
    }
    .bill_info{
        height: 30px;
        line-height: 30px;
    }
    .detail_mian{
        .mian_block{
            height: 594px;
        }
    }
    .el-form-item__label{
        color: $__color-label !important;
    }
    .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
        line-height: 20px !important;
    }
 
    // .reserva-dialog{
    //     text-align: center;
    //     .hpx-success{
    //         margin-bottom: 12px !important;
    //         font-size: 30px !important;
    //     }
    // }
    .company{
        text-align: center;
    }
    .order_status{
        margin-top: 100px;
        padding: 0 20px;
        .hpx-success{
            font-size: 60px;
        }
    }
    .remind{
        font-size: 20px;
    }
    .row_text{
        line-height: 50px;
    }
    .cancel_trade{
        .cancel_reason{
            .el-col{
                margin-bottom: 12px;
            }
        }
        .short_row{
            line-height: 24px;
        }
    }
</style>
<style lang="scss">
    .sign_con_btn {
        .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: $__color-link !important;
            border-color: $__color-link !important;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $__color-show !important;
        }
        .el-button--text {
            color: $__color-link !important;
        }
    }
    .cancel_trade{
        .cancel_reason{
            .el-col{
                .el-checkbox__input.is-checked + .el-checkbox__label{
                    color: inherit;
                }
            }
        }
    }
</style>